<template>
  <div class="twoBox">
    <div class="activityData">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
        <el-form-item label="" prop="cardName">
          <el-input v-model="queryParams.cardName" placeholder="卡名称" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="" prop="cardNo">
          <el-input v-model="queryParams.cardNo" placeholder="卡编号" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="" prop="fromCustomerPhone">
          <el-input v-model="queryParams.fromCustomerPhone" placeholder="转赠账户" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="" prop="toCustomerPhone">
          <el-input v-model="queryParams.toCustomerPhone" placeholder="接受账户" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="" prop="issuerShop">
          <el-input v-model="queryParams.issuerShop" placeholder="发行店铺" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择" size="small">
            <el-option v-for="item in recordTypeList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
        @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
        <template v-slot:fee="{ scope }">
          <p v-if="scope.row.feeType == 1">{{scope.row.fee}}CoCo</p>
          <p v-if="scope.row.feeType == 2">￥{{scope.row.fee}}</p>
          <p v-if="scope.row.feeType == 3">{{scope.row.fee}}椰分</p>
        </template>
        <template v-slot:status="{ scope }">
          <div v-if="scope.row.status == 1">已完成</div>
          <div v-if="scope.row.status == 2">转赠中</div>
          <div v-if="scope.row.status == 3">转赠失败</div>
        </template>
      </ex-table>
    </div>
  </div>
</template>
<script>
  import {
    adminDict,
    equityRecordList,
  } from '@/api/merchantsNFR/nfrTransfer'
  import handlePageMixin from "@/mixins/handlePageMixin";
  export default {
    name: "shopDetail",
    components: {

    },
    props: {
      id: String,
    },
    mixins: [handlePageMixin],
    data() {
      return {
        examplesVisible: false,
        configurationVisible: false,
        tableData: [],
        recordTypeList: [{
            id: '',
            value: '全部',
          },
          {
            id: '1',
            value: '已完成',
          },
          {
            id: '2',
            value: '转赠中',
          },
          // {id: '3',value: '转赠失败',},
        ],
        queryParams: {
          cardName: '',
          customerId: '',
          fromCustomerPhone: '',
          status: '',
          toCustomerPhone: '',
          cardNo: '',
          donationType: '2', //转赠明细类型 1 NFR转赠 2 赚卡转赠
          issuerShop: '', //发行店铺
        },
        value1: '',
        tableColumn: [{
            prop: "createTime",
            label: "转赠时间"
          },
          {
            prop: "issuerName",
            label: "发行方",
            width: 100
          },
          {
            prop: "issuerShop",
            label: "发行店铺",
            width: 100
          },
          {
            prop: "cardNo",
            label: "卡编号",
            width: 100
          },
          {
            prop: "cardName",
            label: "卡名称",
            width: 100
          },
          {
            prop: "donationNo",
            label: "转赠单号"
          },
          {
            prop: "fromCustomerPhone",
            label: "转赠账户"
          },
          {
            prop: "fromCustomerAddress",
            label: "转赠地址"
          },
          {
            prop: "toCustomerPhone",
            label: "接收账户"
          },
          {
            prop: "toCustomerAddress",
            label: "接收地址"
          },
          {
            label: "转赠手续费",
            slot: true,
            slotName: "fee",
          },
          {
            label: "状态",
            slot: true,
            slotName: "status",
            fixed: "right",
          },
        ],
      };
    },
    watch: {

    },
    created() {

      this.getList()
      this.getadminDict()
    },
    mounted() {

    },
    methods: {
      getadminDict() {
        //获取商户类型字典
        const params = {
          dictType: "customer_change_order",
        };
        adminDict(params).then((res) => {
          this.recordTypeList = res.result[0].dictList;
        });
      },
      /** 查询盲盒开奖名单*/
      getList() {
        this.loading = true;
        var data = {
          ...this.pageOptions,
          ...this.queryParams,
        }
        equityRecordList(data).then(response => {
          const {
            records,
            total
          } = response.result
          console.log('response', response)
          this.tableData = records
          this.$refs.table.pageOptions.total = total;
          this.loading = false;
        });
      },

      handleConfiguration(row) {
        this.configurationVisible = true
      },
      /** 搜索按钮操作 */
      handleQuery() {
        // this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams = {
          cardName: '',
          customerId: '',
          fromCustomerPhone: '',
          status: '',
          toCustomerPhone: '',
          cardNo: '',
          donationType: '2', //转赠明细类型 1 NFR转赠 2 赚卡转赠
          issuerShop: '', //发行店铺
        }
        this.handleQuery();
      },
      /* 删除 */
      handleExamples(id) {
        this.examplesVisible = true
      },
      _handleSuccess() {
        this.getList()
      },
    },
  };

</script>
<style lang="scss" scoped>

</style>
